<template>
    <div class="w-full h-full flex flex-col">
        <div class="w-full flex flex-row justify-between">
            <div class="flex flex-row  w-w2/5">
                <el-input class="w-w1/3" placeholder="请输入名称" clearable prefix-icon="el-icon-search"
                    v-model="s_coupon.m_batch_screen.name" @clear="action_list_batch">
                </el-input>
                <el-button type="primary" class=" bg-cmain_hover ml-w10" @click="action_list_batch">搜索</el-button>
                <el-select class="w-w1/3 ml-w10" v-model="s_coupon.m_batch_screen.goods" placeholder="请选择商品" clearable
                    @clear="action_list_batch" @change="action_list_batch">
                    <el-option :label="item.name" :value="item.id" v-for="(item, index) in s_goods.list_goods_dic"
                        :key="index">
                    </el-option>
                </el-select>
            </div>
            <el-button type="primary" class=" bg-cmain_hover ml-w10" icon="el-icon-plus"
                @click="bool_dialog_create_batch = true">创建批次
            </el-button>
        </div>
        <div class="w-full h-full mt-w20 ">
            <el-table :data="s_coupon.list_batch" stripe style="width: 100%; " height="660">
                <el-table-column type="index" label="序号" min-width="5%">
                </el-table-column>
                <el-table-column prop="name" label="批次名称" min-width="10%">
                </el-table-column>
                <el-table-column prop="goodsName" label="商品类型" min-width="10%">
                </el-table-column>
                <el-table-column prop="termValidity" label="到期时间" min-width="10%">
                </el-table-column>
                <el-table-column prop="num" label="券码数量" min-width="5%">
                </el-table-column>
                <el-table-column prop="surplusNum" label="可用数量" min-width="5%">
                </el-table-column>

                <el-table-column label="操作" min-width="10%">
                    <template slot-scope="scope">
                        <el-button type="text" @click="action_list_coupon(scope.row.id)" class="mr-w10">
                            券码详情
                        </el-button>
                        <el-button type="text" @click="action_export_coupon(scope.row)" >
                            导出券码
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="w-full flex items-end justify-center" style="height:7%">
                <el-pagination background layout="prev, pager, next" :total="s_coupon.m_page.total"
                    :page-size="s_coupon.m_page.limit" @current-change="action_page_change">
                </el-pagination>
            </div>
        </div>
        <UiDialogAddCoupon :is_showDialog="bool_dialog_create_batch" @nydialog_closed="bool_dialog_create_batch = false"
            @nydialog_submit="action_cretate_batch"></UiDialogAddCoupon>
        <UiDialogListCoupon :is_showDialog="bool_dialog_show_coupon" :data="s_coupon.list_coupon"
            @nydialog_closed="bool_dialog_show_coupon = false"></UiDialogListCoupon>
    </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>

</style>
